<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>08-函数进阶</title>
  <style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }

  </style>
</head>
<body>
  <div id="box" class="box">
    <button message="后盾人">button</button>
    <button message="hdcms">button</button>
  </div>
  <script src="index.js"></script>
  <script type="text/javascript">
    var btns = document.querySelectorAll("button");
    /*
    btns.forEach((btn, i) => {
      btn.onclick = function() {
        (function() {
          alert(`点击了第${i + 1}个按钮`);
        })(i)
      }
    })
    */
   
   for (var i = 0; i < btns.length; i++) {
     btns[i].onclick = (function(i) {
      return function() {
          console.log(`点击了第${i + 1}个按钮`);
      }
     }(i))
   }
  </script>
</body>
</html>